<template>
  <h1>普通用法</h1>
  <el-date-picker
      v-model="value1"
      type="date"
      placeholder="请选择日期" />

  <h1>只读</h1>
  <el-date-picker
      v-model="value1"
      type="date"
      placeholder="请选择日期"
      :readonly="true" />

  <h1>禁用</h1>
  <el-date-picker
      v-model="value1"
      type="date"
      placeholder="请选择日期"
      :disabled="true" />

  <h1>文本框可输入</h1>
  <el-date-picker
      v-model="value1"
      type="date"
      placeholder="请选择日期"
      :editable="true" />

  <h1>显示清除按钮</h1>
  <el-date-picker
      v-model="value1"
      type="date"
      placeholder="请选择日期"
      :clearable="true" />

  <h1>显示时间范围</h1>
  <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期" />


  <h1>显示在输入框的格式</h1>
  <el-date-picker
      v-model="value2"
      type="date"
      placeholder="请选择日期"
      format="YYYY/MM/DD"
  />

  <h1>设置快捷选项</h1>
  <el-date-picker
      v-model="value3"
      type="date"
      placeholder="请选择日期"
      :shortcuts="shortcuts" />

  <h1>设置禁用日期</h1>
  <el-date-picker
      v-model="value3"
      type="date"
      placeholder="请选择日期"
      :disabled-date="disabledDate" />

  <h1>事件</h1>
  <el-date-picker
      v-model="value4"
      type="date"
      placeholder="请选择日期"
      @change="handleChange" />

  <h1>方法</h1>
  <el-date-picker
      v-model="value5"
      type="date"
      placeholder="请选择日期"
      @blur="handleBlur"
      ref="datePickers"
  />



</template>

<script setup>
import { ref } from 'vue'
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
const value5 = ref('')


const shortcuts = [
  {
    text: '今天',
    value: new Date(),
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const disabledDate = (time) => {
  // 如果输入框选择的时间 > 当前的时间 ,则不可选,也就是只能选当前时间之前的
  return time.getTime() > Date.now()
}


const handleChange = (value) => {
  console.log(value)
}

const datePickers = ref()
const handleBlur = ()=> {
  console.log("获得焦点")
  datePickers.value.focus()
}




</script>

<style scoped>

</style>